<template>
  <div class="bg-white rounded-xl shadow-custom p-6">
    <div class="flex items-center justify-between mb-6">
      <h3 class="text-lg font-semibold text-gray-800">最近更新</h3>
      <router-link to="/activities" class="text-sm text-primary hover:text-primary/80 transition-custom">查看全部</router-link>
    </div>
    <div class="space-y-4">
      <div 
        v-for="update in updates" 
        :key="update.id"
        class="p-3 border border-gray-100 rounded-lg hover:bg-gray-50 transition-custom"
      >
        <div class="flex items-center">
          <div :class="`bg-${update.color}/10 p-2 rounded-lg`">
            <i :class="`fa ${update.icon} text-${update.color}`"></i>
          </div>
          <div class="ml-3">
            <h4 class="font-medium text-gray-800">{{ update.title }}</h4>
            <p class="text-sm text-gray-500">{{ update.user }} · {{ update.time }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RecentUpdates',
  props: {
    updates: {
      type: Array,
      required: true
    }
  }
}
</script> 